<template>
  <div class="header after">
    <div class="switch f-l" @click="$store.state.menu.state=!$store.state.menu.state;">
      <i class="fa fa-bars"></i>
    </div>
    <div class="title f-l">{{$route.meta.title}}</div>
    <div class="user f-r">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <el-avatar
            size="large"
            :src="$store.state.user.icon?$store.state.user.icon:'/static/images/user.png'"
          ></el-avatar>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="$router.replace('/setting/personal')">
            <i class="fa fa-user-o"></i>
            个人中心
          </el-dropdown-item>
          <el-dropdown-item @click.native="exit">
            <i class="fa fa-sign-out"></i>
            退 出
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    exit() {
      // 退出
      this.Cookie.remove("username");
      this.Cookie.remove("BJYSESSION");
      this.$router.replace("/login");
    }
  }
};
</script>
<style scoped>
.header {
  padding: 0 20px;
  line-height: 60px;
  background-color: #fff;
}
.header .user {
  height: 40px;
  margin-top: 10px;
  cursor: pointer;
  overflow: hidden;
}
.header .user >>> .el-dropdown {
  height: 40px;
}
.switch {
  line-height: 60px;
  text-align: center;
  color: #333;
  font-size: 19px;
  cursor: pointer;
}
.header > .title {
  font-size: 15px;
  font-weight: 700;
  margin-left: 20px;
}
</style>